<template>
  <div>
    <a-modal
      :visible.sync="visible"
      v-bind="$attrs"
      v-on="$listeners"
      :maskClosable="false"
      :footer="null"
      width="836px"
      title="选择人员"
      wrapClassName="user-config-modal-container"
      @cancel="closeModal()"
    >
      <div class="modal-main">
        <a-form-model ref="ruleForm" :model="form" :rules="rules">
          <a-row>
            <a-col :span="24">
              <a-form-model-item label="选择人员">
                <div class="user-config-modal-body flex">
                  <div class="no-choose-container">
                    <div class="transfer-header flex">
                      未选用户<a-checkbox
                        v-model="allChooseFlag"
                        @change="allChoose()"
                      >
                        全选
                      </a-checkbox>
                    </div>
                    <div class="transfer-container">
                      <div class="people">
                        <div class="filter-data">
                          <a-input-search
                            placeholder="请输入姓名"
                            v-model="userName"
                            @search="onSearch($event)"
                            style="width: 100%"
                          />
                        </div>
                        <div class="filter-result">
                          <a-empty
                            :image="simpleImage"
                            v-if="peoleOptions.length == 0"
                          />
                          <a-checkbox-group
                            v-model="people"
                            name="checkboxgroup"
                            :options="peoleOptions"
                          />
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="transfer-button">
                    <div
                      class="button"
                      :class="people.length == 0 && 'dis'"
                      @click="transferData()"
                    ></div>
                  </div>
                  <div class="choose-container">
                    <div class="transfer-header flex">
                      已选用户
                      <span class="clear-all" @click="allClear()"
                        >全部清空</span
                      >
                    </div>
                    <div class="transfer-container">
                      <a-empty
                        :image="simpleImage"
                        v-if="hasChoosedUser.length == 0"
                      />
                      <div
                        class="choosed-people"
                        v-for="item in hasChoosedUser"
                        :key="item.id"
                      >
                        <span>{{ item.user_name || item.userName }}</span>
                        <span class="colose">
                          <bj-icon-font
                            type="close"
                            color="#fff"
                            :size="12"
                            @click="removeUser(item)"
                          ></bj-icon-font>
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </div>
      <div class="modal-footer">
        <a-button type="default" @click="closeModal()">取消 </a-button>
        <a-button
          type="primary"
          :loading="loading"
          @click="submit()"
          :disabled="hasChoosedUser.length == 0"
        >
          提交
        </a-button>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { Empty } from "ant-design-vue";
import { notificationTip } from "@/utils";
import {
  getAllUserQXData,
  getFlowOwner,
  updateFlowOwner,
} from "@/api/wisdom-beam/quality-app.js";
export default {
  name: "configModal",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    row: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.getUserList();
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      form: {},
      rules: {},
      //人员姓名
      userName: "",
      loading: false,
      //人员列表
      peoleOptions: [],
      people: [],
      allChooseFlag: false,
      //已选人员
      hasChoosedUser: [],
      orignData: [],
    };
  },
  beforeCreate() {
    this.simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
  },
  methods: {
    onSearch() {
      let { userName, orignData } = this;
      this.peoleOptions = orignData.filter((v) =>
        v.userName.toLowerCase().includes(userName.toLowerCase())
      );
    },
    //提交
    submit() {
      if (this.hasChoosedUser.length > 0) {
        this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            this.loading = true;
            let { id = "" } = this.row;
            updateFlowOwner({
              id,
              userIdLs: this.hasChoosedUser.map((v) => v.id).toString(),
              userNameLs: this.hasChoosedUser.map((v) => v.userName).toString(),
            })
              .then((res) => {
                notificationTip("success", "操作成功");
                this.closeModal();
                this.$emit("updateData");
              })
              .catch((_) => {})
              .finally((_) => {
                this.loading = false;
              });
          }
        });
      }
    },
    //左侧全选
    allChoose() {
      let { allChooseFlag } = this;
      if (allChooseFlag) {
        let ids = this.hasChoosedUser.map((v) => v.id);
        this.peoleOptions.forEach((v) => {
          let { id } = v;
          if (!ids.includes(id)) {
            this.people.push(id);
          }
        });
      } else {
        this.people = [];
      }
    },
    //数据移动到右侧
    transferData() {
      let { people, peoleOptions } = this;
      if (people?.length > 0) {
        this.hasChoosedUser = this.hasChoosedUser.concat(
          peoleOptions.filter((v) => people.includes(v.value))
        );
        setTimeout(() => {
          this.disabledUserList();
          this.people = [];
          this.allChooseFlag = false;
        });
      }
    },

    //右侧全部清空
    allClear() {
      this.hasChoosedUser = [];
      this.disabledUserList();
    },

    //单个删除已选数据
    removeUser(item) {
      let { id } = item;
      this.peoleOptions.forEach((v) => {
        if (v.id == id) {
          this.$set(v, "disabled", false);
        }
      });
      this.hasChoosedUser = this.hasChoosedUser.filter((v) => v.value != id);
    },

    //禁用人员列表
    disabledUserList() {
      let ids = this.hasChoosedUser.map((v) => v.id);
      this.peoleOptions.forEach((v) => {
        this.$set(v, "disabled", ids.includes(v.value));
      });
    },

    //查询人员列表
    getUserList() {
      let { userName = "" } = this;
      getAllUserQXData({ userName })
        .then((res) => {
          let { data } = res;
          this.orignData = data?.result || [];
          this.peoleOptions = data?.result || [];
          this.peoleOptions.forEach((v) => {
            let { userName, id } = v;
            v.label = userName;
            v.value = id;
          });
        })
        .catch((_) => {
          this.orignData = [];
          this.peoleOptions = [];
        })
        .finally((_) => {
          this.getChoosedUser();
        });
    },

    //查询已选人员
    getChoosedUser() {
      let { id = "" } = this.row;
      return new Promise((resolve, reject) => {
        getFlowOwner({ id })
          .then((res) => {
            let { data } = res;
            (data?.result || []).forEach((v) => {
              let { userName, id } = v;
              v.label = userName;
              v.value = id;
            });
            this.hasChoosedUser = data?.result || [];
            this.disabledUserList();
            resolve();
          })
          .catch((_) => {
            this.hasChoosedUser = [];
            reject();
          })
          .finally((_) => {});
      });
    },

    //关闭弹窗
    closeModal() {
      this.form = {};
      this.userName = "";
      this.orignData = [];
      this.people = [];
      this.peoleOptions = [];
      this.hasChoosedUser = [];
      this.allChooseFlag = false;
      this.$emit("update:visible", false);
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.user-config-modal-container {
  .ant-modal-body {
    padding: 0px;
  }
  .modal-main {
    padding: 20px 60px 20px 20px;
    //选择人员
    .user-config-modal-body {
      height: 424px;
      .transfer-header {
        width: 100%;
        height: 36px;
        background: #f3f4f6;
        color: #2b2c30;
        padding: 0 10px;
        align-items: center;
        justify-content: space-between;
        flex-shrink: 0;
        .clear-all {
          color: var(--primary-color);
          cursor: pointer;
        }
      }
      .transfer-container {
        flex: 1;
        overflow: hidden;
        .people {
          height: 100%;
          width: 100%;
          .flex();
          flex-direction: column;
          overflow: hidden;
          .filter-data {
            padding: 10px;
            flex-shrink: 0;
            .input {
              margin-bottom: 10px;
              &:last-of-type {
                margin-bottom: 0;
              }
            }
          }
          .filter-result {
            flex: 1;
            .custom-scrollbar();
            padding: 0 10px;
            label {
              display: block;
              margin-bottom: 12px;
            }
          }
        }
      }

      .no-choose-container {
        height: 100%;
        flex: 1;
        .flex();
        flex-direction: column;
        border: 1px solid #d4d7d8;
        border-radius: 4px;
        overflow: hidden;
      }
      .transfer-button {
        height: 100%;
        width: 70px;
        .flex();
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        .button {
          width: 46px;
          height: 28px;
          cursor: pointer;
          border-radius: 4px;
          background: var(--primary-color)
            url("https://jszhgd.cn/static/pc/transfer.png") no-repeat center
            center;
          background-size: 14px 10px;
          &.dis {
            background-color: #dcdcdc;
            cursor: not-allowed;
            &:active {
              opacity: 1;
            }
          }
        }
      }
      .choose-container {
        height: 100%;
        flex: 1;
        box-sizing: border-box;
        border: 1px solid #d4d7d8;
        border-radius: 4px;
        flex-shrink: 0;
        .flex();
        flex-direction: column;
        overflow: hidden;
        .transfer-container {
          padding: 10px 10px 0 0;
          .custom-scrollbar();
          .choosed-people {
            float: left;
            min-width: 84px;
            height: 32px;
            background: #f1f2f7;
            border-radius: 4px;
            .flex();
            align-items: center;
            box-sizing: border-box;
            padding: 0 10px;
            color: var(--primary-color);
            margin: 0 0 10px 10px;
            .flex();
            justify-content: space-between;
            .colose {
              width: 12px;
              height: 12px;
              background: var(--primary-color);
              border-radius: 50%;
              .flex();
              align-items: center;
              justify-content: center;
              color: #fff;
              cursor: pointer;
              margin-left: 4px;
              /deep/.bj-icon {
                transform: scale(0.6) translateY(1px);
              }
            }
          }
        }
      }
    }
    //推送类型
    .ant-form-item {
      .flex();
      .ant-form-item-label {
        width: 100px;
        white-space: pre-wrap;
        .flex();
        justify-content: flex-end;
        align-items: center;
        height: 40px;
        line-height: 30px;
        label {
          color: #999999;
        }
      }
      .ant-form-item-control-wrapper {
        flex: 1;
      }
    }
  }
  .modal-footer {
    .flex();
    justify-content: center;
    padding-bottom: 20px;
    button {
      &:last-child {
        margin-left: 20px;
      }
    }
  }
  .ant-empty {
    margin: 0;
    height: 90%;
  }
}
</style>
